
import SubTitle from '@/views/components/SubTitle';
import { useEffect } from 'react';
import { Select, Input, Radio, Form, Space, Tooltip } from 'antd';

const { Option } = Select;

/** 售后信息 */
const AfterSalesInfo = (props) => {

	const [form] = Form.useForm();

	const { item, expressList, elRef, createType } = props;

	useEffect(() => {
		form.resetFields();
	}, [createType])

	//快递下拉
	const expressListOption =
		expressList.length &&
		expressList.map(function (item) {
			return (
				<Option value={item.id} key={item.id}>
					<Tooltip title={item.name}>
						{item.name}
					</Tooltip>
				</Option>
			);
		});


	return (
		<>
			<SubTitle wrapStyle={{ margin: '24px 0 12px 0' }} symbol as="s2" title="售后信息" />
			<Form
				layout="inline"
				ref={elRef}
				form={form}
				initialValues={{
					afterType: item.afterType || 0,
					refundLogisticsId: item.refundLogisticsId,
					refundLogisticsNo: item.refundLogisticsNo,
					refundRemarks: item.refundRemarks,
				}}
			>
				<Form.Item label="售后类型" name="afterType">
					<Radio.Group>
						<Radio value={0}>已发货退货退款</Radio>
					</Radio.Group>
				</Form.Item>
				<Space size={0} style={{ marginTop: '16px' }} >
					<Form.Item label="" name="refundLogisticsId">
						<Select placeholder="请选择退货快递公司" style={{ width: '210px' }} >
							{expressListOption}
						</Select>
					</Form.Item>
					<Form.Item label="" name="refundLogisticsNo">
						<Input style={{ width: '210px' }} placeholder="退回快递单号" />
					</Form.Item>
					<Form.Item label="" name="refundRemarks">
						<Input style={{ width: '520px' }} showCount maxLength={30} placeholder='请输入退货备注' />
					</Form.Item>
				</Space>
			</Form>
		</>
	);
}

export default AfterSalesInfo;
